<script lang="ts" setup>
import { ref, onMounted, inject } from "vue";
import { useRouter, useRoute } from "vue-router";
let video_main = ref();
let socket: any = inject("socket");
let route = useRoute();
//let { userName, id } = route.query;

onMounted(() => {
  const constraints = { audio: true };
  navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    // video_main.value.srcObject = stream;
    let mediaRecorder = new MediaRecorder(stream, {
      audioBitsPerSecond: 128000,
      videoBitsPerSecond: 2500000,
      mimeType: "video/mp4",
    });
    console.log(mediaRecorder);

    console.log("状态：", mediaRecorder.state);

    mediaRecorder.ondataavailable = (e) => {
      console.log(123);
    };
    // video_main.value.onloadedmetadata = function (e) {
    //   video_main.value.play();
    // };
  });
});
</script>

<template>
  <div class="main">
    <video ref="video_main"></video>
  </div>
</template>


<style lang="scss" scoped>
.main{
    width: 100%;
    height: 100%;
    // background-color: pink;
}
video{
    width: 100%;
    height: 100%;
}
</style>